<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script src="http://code.jquery.com/jquery-1.8.3.min.js "></script>
<style type="text/css">
body{
    margin: 0;
    padding: 0;
}
ul li{
    list-style: none;
    float: left;
    margin-right: 5px;
}
img{
    height: 300px;
    width: 300px;
}
button{
    display: none;
}
</style>
</head>
<body>
     <div class="change">
         <ul></ul>
     </div>
    <button id="changeBtn" type="button">换一批</button>
</body>
</html>
<script type="text/template" id="article">
    <%article.forEach(function(article){%>
    <li><img src="<%=article.img_url%>"></li>
    <%})%>
</script>
<script src="js/ejs.js"></script>
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
  $(function(){
       var  i=0;
       index(i)
       $('#changeBtn').click(function(){
       
       i+=9
       index(i)
    })
   function index(i){
      $.ajax({
        url:"./lis.php",
        data:{
            id:i
        },
       
        dataType:'JSON',
        success: function(data){
            var template = $('#article').html();
            var html = ejs.render(template,{article:data})
            $('#changeBtn').fadeIn();
            $('.change ul').html(html);
        }
    }) 
   }
  })
   
    
    // $(function() {
    //     sjShow();
    //     $("#changeBtn").click(function(){
    //         sjShow();
    //     });
    // })
    // function sjShow(){
    //     $(".change").hide();
    //     var showCount=0;
    //     while(showCount<5){
    //         var id=Math.floor(Math.random()*10);
    //         var curDiv=$(".change").eq(id);
    //         if(curDiv.css("display")=="none"){
    //             curDiv.css("display","block");
    //             showCount++;
    //         }
    //     }
    // }
</script>